<template>
  <a-card :bordered="false">
    <div class="container">
      <div class="needs">
        <div class="wid" style="padding-right: 5px">
          <div class="wrap">
            <div class="page-tit">
              <div class="fr"><i>*</i><span>为必填项</span></div>
            </div>
            <div class="item">
              <div class="title"><b style="color: #2d2d2d;font-size: 16px;margin-bottom: 16px;margin-top: -10px">纽扣基本信息</b></div>

   <a-row :gutter="24">
	   <a-col :xl="7" :lg="7" :md="8" :sm="24">
	     <a-form-item label="纽扣编号" required>
	          <a-input style="margin-top: 0px;width: 200px;"  placeholder="请输入纽扣编号" v-model="buttonsCode" onkeyup="value=value.replace(/[\u4e00-\u9fa5]/ig,'')"></a-input>
	     </a-form-item>
	   </a-col>

 <a-col :xl="7" :lg="7" :md="8" :sm="24">
   <a-form-item label="纽扣类型" required>
					   <a-select
					      v-model="categoryId"
					     style="width: 200px"
				class="
				input"
					    placeholder="请选择纽扣的类型"
					  >
					     <a-select-option v-for="item in categoryList" :value="item.id.toString()"  :key="item.id" :label="item.categoryName">
					          {{item.categoryName}}
					          </a-select-option>
					</a-select>
				</a-form-item>
				</a-col>

				<a-col :xl="7" :lg="7" :md="8" :sm="24">
				  <a-form-item label="排序">
				      			<a-input    style="width: 200px"  type="number" v-model="sortField"></a-input>
				  </a-form-item>
				</a-col>
			 </a-row>
          </div>

    <div class="item">
	   <a-row :gutter="24">
	     <a-col :xl="7" :lg="7" :md="8" :sm="24">
	       <a-form-item label="售价加价" required>
	            <a-input style="width: 200px;"  placeholder="请设置售价加价" v-model="retailPrice"></a-input>
           <span style="margin-left: 5px">￥/元</span>
	       </a-form-item>
	     </a-col>

		 <a-col :xl="7" :lg="7" :md="8" :sm="24">
		   <a-form-item label="成本加价" required>
		          <a-input style="width: 200px;"  placeholder="请设置成本加价" v-model="costPrice"></a-input>
         <span style="margin-left: 5px">￥/元</span>
		   </a-form-item>
		 </a-col>



		 <a-col :xl="7" :lg="7" :md="8" :sm="24">
		   <a-form-item label="供应商" required>
		        <a-select
		        class="
		        input"
		          style="width: 200px"
		          v-model="sysuserId"
		          placeholder="请选择供应商"
		        >
		          <a-select-option :label="item.realname" :value="item.id"  v-for="(item,key) in gyslist" :key="item.realname">
		            {{item.realname}}
		          </a-select-option>
		        </a-select>
		   </a-form-item>
		 </a-col>

		 </a-row>
            </div>


          <div class="item">
            <div style="width: 100%;overflow: hidden;">
		     <a-row :gutter="24">
				 <a-col :xl="7" :lg="7" :md="8" :sm="24">
				   <a-form-item label="纽扣图片" required>
				       		   <j-image-upload class="avatar-uploader" text="上传" v-model="buttonsImg" ></j-image-upload>
				   </a-form-item>
				 </a-col>

				 <a-col :xl="7" :lg="7" :md="8" :sm="24">
				   <a-form-item label="备注">
				       		<a-textarea placeholder="请填写你的备注" :rows="4"  v-model="remark" style="width: 380px;"/>
				   </a-form-item>
				 </a-col>
				  </a-row>
            </div>
          </div>

          <div class="submit">
            <button class="c1" @click="addCustomer()">保存提交</button>
         <!--   <button class="c2">重置</button> -->
          </div>
        </div>
      </div>
    </div>
    </div>
  </a-card>
</template>

<script>
  import '@/assets/less/TableExpand.less'
  import {
    mixinDevice
  } from '@/utils/mixin'
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'
  import '@/assets/less/TableExpand.less'
  import JAreaLinkage from '@comp/jeecg/JAreaLinkage'
  import JDate from '@/components/jeecg/JDate.vue'
  import {
    deleteAction,
    getAction,
    putAction,
    postAction,
    downFile,
    getFileAccessHttpUrl
  } from '@/api/manage'
  // 引入搜索部门弹出框的组件
  // import JImageUpload from '../../../components/jeecg/JImageUpload'
  import JImageUpload from '../../components/jeecg/JImageUpload'

  export default {
    name: "addButton",
    mixins: [mixinDevice, JeecgListMixin],
    components: {
      JDate,
      JAreaLinkage,
      JImageUpload
    },
    data() {
      let self = this
      return {
      postingtitle:'',
		  sortField:0,
		  gysList:{},
		  categoryId:'请选择纽扣类型',
		  categoryList:{ //用来存放取到的品类

		  },
      businessLicense:'', //营业执照
      colorType:'',
	   libuType:'',
     buttonsCode:'',
     buttonsName:'',
     sysuserId:'请选择供应商',
     brandLabels:'',
     brand:'',
     retailPrice:'',
     costPrice:'',
     isMonth:0,
	   buttonsImg:'',
     inventory: '',
     remark:'',
     isshenhe:'',//需求是否需要审核
     flag:false, //数据验证的最终结果
     url: {
          list: "/total/sys_user/query_totalSysuser_Detail",
          detail:"/ButtonManage/getButtonbyId",
          add:"/ButtonManage/addButton",
          update:"/ButtonManage/updateButton",
		      pingleilist:"/ButtonManage/getallButtonCategory",
		      gysList: '/fabricCenter/selectGYS', // 供应商列表
     },
        dialogVisible: false,
        dictOptions: {},
        pcaData: '',
        searchOption: {
          city: '',
          citylimit: ''
        },
        events: {
          pName: 'Geolocation',
          init: (o) => {
            console.log('o', o)
            console.log('center', o.getCenter())
            o.getCity(result => {
              console.log(result)
            })
          },
          click: (e) => {
            console.log(e)
            let {
              lat,
              lng
            } = e.lnglat
            let pos = [lng, lat].join(',')
            console.log('pos', pos)
            self.curMarker = [lng, lat]
            self.setAssres(self.curMarker)
          }
        },
        plugin: [{
          pName: 'ToolBar', //工具条插件
          position: 'LB',
        },
          {
            pName: 'OverView',
            //isOpen:true//鹰眼是否打开
          },
          {
            pName: 'Scale'
          },
          {
            pName: 'Geolocation', //定位插件
            events: {
              init(o) {
                //定位成功 自动将marker和circle移到定位点
                o.getCurrentPosition((status, result) => {
                  let {
                    lat,
                    lng
                  } = result.position
                  self.curMarker = [lng, lat]
                  self.setAssres(self.curMarker)
                  self.$nextTick();
                });
              }
            }
          }
        ]
      }
    },
    created() {
		   this.getgys();
      if(this.$route.query.id==0){
		     this.getallcategory();
      }else{
		     this.getallcategory();
          let id=this.$route.query.id;
          getAction(this.url.detail,{"id":id}).then((res)=>{
              if(res.success){
                this.buttonsName=res.result.buttonsName;
               this.buttonsCode=res.result.buttonsCode;
                this.buttonsImg=res.result.buttonsImg;
                   this.inventory=res.result.inventory;
                   this.retailPrice=res.result.retailPrice;
                   this.costPrice=res.result.costPrice;
                   this.sysuserId=res.result.sysuserId;
                   this.remark=res.result.remark;
				   this.categoryId=res.result.categoryId;
				   this.sortField=res.result.sortField;
              }else{
                this.$message.warning(res.message);
              }
            })
      }
    },
    computed: {
      uploadAction: function() {
        return this.url.fileUpload;
      }
    },
    methods: {
			getgys() { // 获取供应商列表
			  getAction(this.url.gysList).then(res => {
			    this.gyslist = res.result
			  })
			},
			//查询纽扣品类
			    getallcategory(){
			     getAction(this.url.pingleilist).then((res)=>{
			        if(res.success){
			         this.categoryList=res.result;
			        }else{
			          this.$message.warning(res.message);
			        } })
			},
     addCustomer(){
       var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
        if(this.buttonsCode==''){
					 this.$message.warning("未输入编号，请输入");
					 return;
				};
       if(this.categoryId=='' || this.categoryId=='请选择纽扣类型'){
         this.$message.warning("未选择纽扣类型，请选择");
         return;
       };
       if(this.retailPrice==''){
         this.$message.warning("未输入售价加价，请输入");
         return;
       };
       if(!reg.test(this.retailPrice)){
         this.$message.warning("请输入正确的售价加价金额")
         return
       }
       if(this.costPrice==''){
         this.$message.warning("未输入成本加价，请输入");
         return;
       };
       if(!reg.test(this.costPrice)){
         this.$message.warning("请输入正确的成本加价金额")
         return
       }
		if(this.sysuserId=='' || this.sysuserId=='请选择供应商'){
					 this.$message.warning("未选择供应商，请选择");
					 return;
				};
       if(this.buttonsImg=='' || this.buttonsImg==null){
         this.$message.warning("请上传纽扣图片");
         return;
       };

       let formData={
              "id":this.$route.query.id,
             "buttonsName":this.buttonsName,
             "buttonsCode":this.buttonsCode,
             "sysuserId":this.sysuserId,
              "categoryId":this.categoryId,
             "retailPrice":this.retailPrice,
              "costPrice":this.costPrice,
              "inventory":this.inventory,
              "remark":this.remark,
			  "buttonsImg":this.buttonsImg,
			  "sortField":this.sortField
       };
             let url;
            if(this.$route.query.id==0){
              url=this.url.add;
            }else{
                 url=this.url.update;
            }
           postAction(url,formData).then((res)=>{
              if(res.success){
                this.$message.success(res.message);
                this.$router.push({path:'/ButtonManage'})
              }else{
                this.$message.warning(res.message);
              }
            }).finally(() => {
              this.confirmLoading = false;
              this.close();
            })
     },

      /**
       * 解析经纬度成地址
       * @param pos
       */
      setAssres(pos) {
        let self = this
        // 这里通过高德 SDK 完成。
        let geocoder = new AMap.Geocoder({
          radius: 1000,
          extensions: "all"
        })
        self.curMarker = pos
        geocoder.getAddress(pos, function(status, result) {
          if (status === 'complete' && result.info === 'OK') {
            if (result && result.regeocode) {
              self.map_address = result.regeocode.formattedAddress;
              self.$nextTick();
            }
          }
        })
      },
      /**
       * 搜索
       * @param pois
       */
      onSearchResult(pois) {
        console.log('pois', pois)
        let latSum = 0;
        let lngSum = 0;
        if (pois.length > 0) {
          let pos = pois[0]
          this.center = [pos.lng, pos.lat]
          this.setAssres(this.center)
        }
      },
      initDictConfig() {

      },
      getPcaText(code) {
        return this.pcaData.getText(code);
      },

    },
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
  @import '~@assets/less/style.min.css';
  @import '~@assets/less/addzhaopin.css';
  @import '~@assets/less/newstyle.css';
</style>
